<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="js/codemirror-5.2/theme/ambiance.css">
	<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/lib/codemirror.css" />
	<link type="text/css" rel="stylesheet" href="js/codemirror-5.2/addon/hint/show-hint.css" />
	<script type="text/javascript" src="js/codemirror-5.2/lib/codemirror.js"></script>
	<script type="text/javascript" src="js/codemirror-5.2/mode/sql/sql.js"></script>
	<script type="text/javascript" src="js/codemirror-5.2/addon/hint/show-hint.js"></script>
	<script type="text/javascript" src="js/codemirror-5.2/addon/hint/sql-hint.js"></script>
	<style>.CodeMirror {border: 0px solid black;}</style>
</head>		
<body>
	<h2>SQL编辑器</h2>
	<form>
		<textarea id="code" name="code"></textarea>
	</form>
    <script>
	  window.onload = function(){
		window.editor = CodeMirror.fromTextArea(document.getElementById('code'),{
			mode:{name:"text/x-mysql"},//采用mysql模式说明：model:text/x-sql，text/x-mysql，text/x-mariadb，text/x-cassandra，text/x-plsql，text/x-mssql，text/x-hive
			indentWithTabs:true,
			smartIndent:true,
			lineNumbers:true,//显示行数
			matchBrackets:true,
			autofocus:true,
			/**theme:"colorforth",//主题**/
			textWrapping:false,
			extraKeys:{"Tab":"autocomplete"},//输入s然后Tab就可以弹出选择项说明Ctrl：输入s然后ctrl就可以弹出选择项
			hintOptions:{tables:{
			  users:{name: null, score: null, birthDate: null},
			  countries:{name: null, population: null, size: null}
			}}
	  });
	};
    </script>
</body>
</html>
